<template>
	<div class="pageWrap">
		<div style="color: rgb(27, 76, 184);margin: 15px 0px">
			<div class="addressIcon"></div>
			<span>当前位置：</span>
			<span style="cursor: pointer" @click="$router.go(-1)">班级列表</span>
			<Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
			<span style="color: #333">{{classInfo.className}}</span>
		</div>
		<div id="calender">
			<FullCalendar :defaultView="defaultView" :plugins="calendarPlugins" :events="calendarEvents" :header="calendarHeader" slotDuration="00:15:00" :slotLabelFormat="formatText" eventBackgroundColor="rgba(68, 125, 247, 0.2)" eventBorderColor="transparent" eventTextColor="#000" locale="zh-cn" :eventLimit='eventLimit' :views="views" :editable="false" :selectOverlap="true" :fixedWeekCount="false" :columnHeaderText="columnHeaderText" :dayRender="dayRender" :eventRender="eventRender" :customButtons="customButtons" :contentHeight="height" :eventTimeFormat="eventTimeFormat" :viewRender="viewRender" @dateClick="handleDateClick" @eventClick="handleEventClick" @eventMouseEnter="handleEventMouseEnter" @eventMouseLeave="handleEventMouseLeave" />
			<div class="ivu-tooltip-popper ivu-tooltip-dark" id="popover" v-show="showTooltip">
				<div class="ivu-tooltip-content">
					<div class="ivu-tooltip-arrow"></div>
					<div class="ivu-tooltip-inner">
						<div>
							<p>班级：{{currentEvent.className}}</p>
							<p>课程：{{currentEvent.courseName}}</p>
						</div>
					</div>
				</div>
			</div>
			<Modal v-model="addCourseScheduleModal.show" :title="addCourseScheduleModal.title" :loading="addCourseScheduleModal.loading" :mask-closable="false" @on-ok="saveCourseSchedule('add')" @on-cancel="resetField" :width="600">
				<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
					<FormItem label="课程" prop="classCourseId">
						<Select filterable v-model="formValidate.classCourseId" placeholder="选择课程" @on-change="getCourseExpList" filterable>
							<Option :value="course.ccid" v-for="course in courseList" :key="course.ccid" :title="course.ccname">{{course.ccname}}</Option>
						</Select>
					</FormItem>
					<FormItem label="课程名称" prop="classCourseName">
						<Input v-model.trim="formValidate.classCourseName" placeholder="课程名称"></Input>
					</FormItem>
					<FormItem label="课节" prop="courseNum">
						<Select filterable v-model="formValidate.courseNum" placeholder="选择课节" @on-change="initCourseNumData">
							<Option :value="1">1</Option>
							<Option :value="2">2</Option>
							<Option :value="3">3</Option>
							<Option :value="4">4</Option>
							<Option :value="5">5</Option>
							<Option :value="6">6</Option>
							<Option :value="7">7</Option>
							<Option :value="8">8</Option>
						</Select>
					</FormItem>
					<div v-if="formValidate.classNumberList.length > 0">
						<!--<span style="color:#ff9900;font-size:10px;margin-left: 25px;margin-bottom:10px;" v-if="formValidate.classNumberList.length > 0"><Icon type="ios-information-circle-outline" size="16"/>课节结束时间不能小于当前时间，否则不能部署</span>-->
						<!--<Alert type="warning" show-icon>课节结束时间不能小于当前时间，否则不能部署</Alert>-->
						<Row v-for="(item,index) in formValidate.classNumberList" :key="index">
							<Col span="12">
							<FormItem :label="'课节'+(index +1)" :prop="'classNumberList.' + index + '.time'" :rules="[{required: true, type:'array', message: '时间不能为空', trigger: 'change'},{validator: validateDate,trigger: 'change'}]">
								<TimePicker :editable="false" format="HH:mm" type="timerange" v-model="item.time" placement="bottom-start" placeholder="选择时间" @on-change="changeTime($event,item)" style="width:100%"></TimePicker>
								<span style="color:#ff0000;font-size:10px;" v-if="item.errorTime">开始结束时间不能小于当前时间</span>
							</FormItem>
							</Col>
							<!--required: true, type:'array', message: 'time can not be empty', trigger: 'change'-->
							<Col span="12">
							<FormItem label="" :label-width="10" :prop="'classNumberList.' + index + '.expDto'" :rules="{required: true, type:'array', message: '课件不能为空', trigger: 'change'}">
								<Select filterable v-model="item.expDto" multiple placeholder="选择课件">
									<Option :value="exp.ecid" v-for="exp in expList" :key="exp.ecid" :title="exp.ecname">{{exp.ecname}}</Option>
								</Select>
							</FormItem>
							</Col>
						</Row>
					</div>
				</Form>
			</Modal>
			<Modal v-model="editCourseScheduleModal.show" :title="editCourseScheduleModal.title" width="600" @on-cancel="initData" :mask-closable="false">
				<div class="courseExpList" v-show="editCourseScheduleModal.showType == 'detail'">
					<p style="margin-bottom:6px;" class="scheduleInfo" v-if="editCourseScheduleModal.show">
						<span><Icon type="ios-book" :size="13"/>课程：{{currentEvent.courseName}}</span>
						<span><Icon type="md-person-add" :size="13"/>班级：{{currentEvent.className}}</span>
						<span><Icon type="md-contacts" :size="13"/>学生数量：{{currentEvent.stuCount}}</span>
						<span><Icon type="md-contacts" :size="13"/>课节数量：{{currentEvent.classNumberList.length}}</span>
					</p>
					<Card style="font-size: 13px;margin-bottom:6px" v-for="(event,index) in currentEvent.classNumberList" :key="event.classNumberId">
						<p slot="title">
							课节{{index+1}}
							<span class="time"><Icon type="ios-time-outline" />{{event.startTime.split(" ")[1]}} - {{event.endTime.split(" ")[1]}} </span>
						</p>
						<span slot="extra">
			            <Poptip
					        confirm
					        title="确定删除该课节？"
					        @on-ok="delCourseByClassNumber(event.classNumberId,index)"
					        style="float:right;margin-left:10px;">
					        <Button type="error" size="small">删除</Button>
					    </Poptip>
			            <!--<Button type="info" size="small" @click="getEnvironData(event)" style="float:right" v-if="!event.showEnviron">环境信息</Button>-->
			        	<Button type="info" size="small" @click="event.showEnviron = false" style="float:right" v-if="event.showEnviron">课节信息</Button>
			        	
			        </span>
						<ul style="list-style:none" v-if="!event.showEnviron">
							<li style="list-style:none" v-for="(exp,index) in event.expDto" :key="index">
								<p class="expName">
									{{exp.expName}}
									<!--<span style="float:right;font-size:12px;"><Icon type="md-desktop" :size="13"/>1</span>-->
								</p>
								<p class="expInfo">
								</p>
								<Divider dashed v-show="index < event.expDto.length -1" style="margin:12px 0;" />
							</li>
						</ul>
					</Card>
				</div>
				<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" v-if="editCourseScheduleModal.showType == 'modify'">
					<FormItem label="课程" prop="classCourseId">
						<Select filterable v-model="formValidate.classCourseId" placeholder="选择课程" @on-change="getCourseExpList" disabled>
							<Option :value="course.ccid" v-for="course in courseList" :key="course.ccid" :title="course.ccname">{{course.ccname}}</Option>
						</Select>
					</FormItem>
					<FormItem label="课程名称" prop="classCourseName">
						<Input v-model.trim="formValidate.classCourseName" placeholder="课程名称"></Input>
					</FormItem>
					<FormItem label="课节" prop="courseNum">
						<Select filterable v-model="formValidate.courseNum" placeholder="选择教学分类" @on-change="initCourseNumData" disabled>
							<Option :value="1">1</Option>
							<Option :value="2">2</Option>
							<Option :value="3">3</Option>
							<Option :value="4">4</Option>
							<Option :value="5">5</Option>
							<Option :value="6">6</Option>
							<Option :value="7">7</Option>
							<Option :value="8">8</Option>
						</Select>
					</FormItem>
					<div v-if="formValidate.classNumberList.length > 0">
						<p style="color:#ff9900;font-size:10px">
							<Icon type="ios-information-circle-outline" size="20" /><span style="color:#ff0000;font-size:10px;">课节开始时间和结束时间不能小于当前时间</span></p>
						<Row v-for="(item,index) in formValidate.classNumberList" :key="index">
							<Col span="12">
							<FormItem :label="'课节' +(index +1) " :prop="'classNumberList.' + index + '.time'" :rules="{validator: validateDate, trigger: 'change'}">
								<TimePicker type="timerange" v-model="item.time" placement="bottom-start" placeholder="Select time" @on-change="changeTime($event,item)"></TimePicker>
							</FormItem>
							</Col>
							<!--required: true, type:'array', message: 'time can not be empty', trigger: 'change'-->
							<Col span="12">
							<FormItem label="" :label-width="10" :prop="'classNumberList.' + index + '.expDto'" :rules="{required: true, type:'array', message: '课件不能为空', trigger: 'change'}">
								<Select filterable v-model="item.expDto" multiple placeholder="选择课件">
									<Option :value="exp.ecid" v-for="exp in expList" :key="exp.ecid" :title="exp.ecname">{{exp.ecname}}</Option>
								</Select>
							</FormItem>
							</Col>
						</Row>
					</div>
				</Form>
				<div slot="footer">
					<Row>
						<Button type="default" @click="editCourseScheduleModal.showType = 'detail'" v-if="editCourseScheduleModal.showType == 'modify'">取消</Button>
						<!--<Button type="primary"  @click="modifyClassNumber" v-if="editCourseScheduleModal.showType == 'detail' && editCourseScheduleModal.showModifyBtn">修改</Button>-->
						<Button type="primary" v-if="editCourseScheduleModal.showType == 'modify'" @click="saveCourseSchedule('modify')">保存</Button>
					</Row>
				</div>
			</Modal>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import FullCalendar from '@fullcalendar/vue'
	import dayGridPlugin from '@fullcalendar/daygrid'
	import Popper from 'popper.js/dist/umd/popper.js'
	//	import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
	import interactionPlugin from '@fullcalendar/interaction'
	import encryption from '@/libs/encryption.js'
	import classCommonFun from './classCommonFunMixin.js'
	//接口
	import {
		getExpList,
		courseExpDetail,
		getallcourselist
	} from '@/api/selfStudy/courseExp.js'
	import {
		getExperGroupsUsers
	} from '@/api/users'
	import {
		queryClassList,
		addTeachSchedule,
		queryTeachSchedule,
		updateTeachSchedule,
		delTeachSchedule
	} from '@/api/selfStudy/class.js'
	export default {
		name: 'calender',
		props: [],
		mixins:[classCommonFun],
		components: {
			FullCalendar, // make the <FullCalendar> tag available
		},
		data() {
			let September = sessionStorage.getItem('November')
			September = JSON.parse(encryption.SelfUseDecrypt(September))
			const validateDate = (rule, value, callback) => { //验证只能填入数字
				//var reg = new RegExp("^([1-9]|[1-9]\\d|100)$");
				//验证警戒值
				let _this = this;
				if(value[0] && value[1]) {
					if(new Date(_this.curDate + ' ' + value[1]).getTime() - new Date().getTime() < 0) {
						callback(new Error('结束时间不能小于当前时间'));
					} else if(new Date(_this.curDate + ' ' + value[0]).getTime() - new Date().getTime() < 0) {
						callback(new Error('开始时间不能小于当前时间'));
					} else if(new Date(_this.curDate + ' ' + value[1]).getTime() - new Date(_this.curDate + ' ' + value[0]).getTime() <= 0) {
						callback(new Error('结束时间必须大于开始时间'));
					} else {
						callback()
					}
				} else {
					callback('时间不能为空')
				}
			}
			return {
				validateDate: validateDate,
				USER_ID: September.userId,
				USER_Name: September.nickname,
				defaultView: 'dayGridMonth',
				calendarPlugins: [dayGridPlugin, interactionPlugin],
				calendarHeader: {
					left: '', //returnButton,filterButton
					center: 'prev,title,next',
					right: '' //dayGridMonth,dayGridDay,timeGridDay
				},
				//				calendarBtnText:{
				//				  today:    'today',
				//				  month:    'month',
				//				  week:     'week',
				//				  day:      'day',
				//				  list:     'list'
				//				},
				prevEle: '',
				eventLimit: true, // for all non-TimeGrid views
				showMore: false,
				views: {
					timeGrid: {
						eventLimit: 4 // adjust to 6 only for timeGridWeek/timeGridDay
					}
				},
				curPanel: '',
				height: (window.innerHeight),
				calendarEvents: [],
				eventTimeFormat: { // like '14:30:00'
					hour: '2-digit',
					minute: '2-digit',
					//				    second: '2-digit',
					meridiem: false
				},
				columnHeaderText: this.formatHeaderText,
				dayRender: this.formatDayText,
				handleEventLimitClick: this.handlEventLimitClick,
				eventRender: this.showToolTip,
				viewRender: this.handleViewRender,
				style: {
					width: '150px',
					heiht: '150px',
					background: 'red',
					zIndex: 99
				},
				curDate: '',
				addCourseScheduleModal: {
					show: false,
					loading: true,
					title: '创建排课'
				},
				editCourseScheduleModal: {
					show: false,
					loading: true,
					title: '排课信息',
					showType: "detail",
					showEnviron: false,
					showModifyBtn: true
				},
				formValidate: {
					classId: '',
					classCourseId: '',
					classCourseName: '',
					classNumberList: [],
					courseDictCode: '',
					teacherId: September.userId,
					teacherName: September.nickname,
					courseNum: 0
				},
				ruleValidate: {
					classId: [{
						required: true,
						message: '班级不能为空',
						trigger: 'change'
					}],
					classCourseId: [{
						required: true,
						message: '课程不能为空',
						trigger: 'change'
					}],
					courseNum: [{
						required: true,
						type: "number",
						min: 1,
						message: '课节不能为空',
						trigger: 'change'
					}],
					classCourseName: [{
						required: true,
						message: '课程名称不能为空',
						trigger: 'change'
					}]
				},
				expList: [],
				courseList: [],
				classList: [],
				tooltip: '',
				showTooltip: false,
				classNumbers: [],
				currentEvent: {},
				environInfo: {},
				eventEl: '',
				customButtons: {
					returnButton: {
						text: '返回',
						click: () => {
							this.$router.go(-1);
						}
					},
					filterButton: {
						text: '教学班级',
						click: () => {
							this.$router.go(-1);
						}
					},
					clearButton: {
						text: '清空排课',
						click: () => {
							this.delCourseByClass()
						}
					},
				},
				monthDay: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
				timeRange: [],
				disabledTime: {
					h: [],
					m: [],
					s: []
				},
				classInfo: {}
			}
		},
		beforeRouteLeave (to, from, next) {
            if(to.path === '/class'){
                //to.query.page = this.$route.query.page
                next()
            }else {
            	//跳转至非教学班页面，清空存储的查询条件
				sessionStorage.removeItem("queryObj");
                next()
            }
        },
		mounted() {
			this.calendarEvents = [];
			$('#calender').on('click', '.fc-day-number', (e) => {
				let date = e.currentTarget.offsetParent.dataset.date;
				this.initData();
				this.formValidate.classNumberList = [];
				if(new Date(date) < new Date(new Date().toLocaleDateString())) {
					return
				}
				//				if(this.prevEle){
				//			    	this.prevEle.style.backgroundColor = "rgba(255,0,0,0)"
				//			    }
				//				info.dayEl.style.backgroundColor = "#f0f5ff";
				//				this.prevEle = info.dayEl;
				if(this.tooltip) {
					this.tooltip.destroy()
				}
				this.curDate = date;
				this.addCourseScheduleModal.show = true;
				this.addCourseScheduleModal.edit = 'add';
				this.addCourseScheduleModal.title = '创建排课 ' + date;
				if(this.classInfo) {
					this.formValidate.classId = this.classInfo.id;
					this.getExperGroupsUsers(this.formValidate.classId);
				}

			})
			var oDate = new Date();
			var year = oDate.getFullYear();
			if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
				this.monthDay = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
			} else {
				this.monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
			}
			this.getAllCourse();
			this.queryClassList();
		},
		computed: {

		},
		filters: {
			
		},
		methods: {
			queryTeachSchedule(id) {
				let params = {};
				this.calendarEvents = [];
				if(this.classInfo || id) {
					params = {
						classId: this.classInfo ? this.classInfo.id : id ? id : ''
					};
				}
				queryTeachSchedule(params).then(data => {
					if(data.code == 1) {
						let calendarEvents = this.dealClassNumberList(data.attribute.data);
						calendarEvents.forEach(item => {
							item.className = this.classInfo.className;
							this.calendarEvents.push({
								title: this.classInfo ? item.courseName : item.className + '【' + item.courseName + '】', //+ '\n班级：' + item.className
								start: item.start,
								end: item.end, // will make the time show
								item: item,
								allDay: false
							})
						})
					} else {
						this.$Message.warning(data.message);
					}
				})
			},
			handleDateClick(info) {
				info.jsEvent.preventDefault();
				this.initData();
				this.formValidate.classNumberList = [];
				if(new Date(info.dateStr) < new Date(new Date().toLocaleDateString())) {
					return
				}
				if(this.prevEle) {
					this.prevEle.style.backgroundColor = "rgba(255,0,0,0)"
				}
				info.dayEl.style.backgroundColor = "#f0f5ff";
				this.prevEle = info.dayEl;
				if(this.tooltip) {
					this.tooltip.destroy()
				}
				this.curDate = info.dateStr;
				this.addCourseScheduleModal.show = true;
				this.addCourseScheduleModal.edit = 'add';
				this.addCourseScheduleModal.title = '创建排课 ' + info.dateStr;
				if(this.classInfo) {
					this.formValidate.classId = this.classInfo.id;
					this.getExperGroupsUsers(this.formValidate.classId);
				}
				//限制课程的可选时间
				if(new Date(info.dateStr) == new Date(new Date().toLocaleDateString())) {
					//this.getDisabledTime();
				}
			},
			handleEventNavLink(date, jsEvent) {
				console.log('day', date.toISOString());
				console.log('coords', jsEvent.pageX, jsEvent.pageY);
			},
			getDisabledTime() {
				let curTime = {
					h: new Date().getHours(),
					m: new Date().getMinutes() + 10,
					s: new Date().getSeconds()
				}
				for(let i = 0; i < curTime.h; i++) {
					this.disabledTime.h.push(i)
				}
				for(let i = 0; i < curTime.m; i++) {
					this.disabledTime.m.push(i)
				}
				for(let i = 0; i < curTime.s; i++) {
					this.disabledTime.s.push(i)
				}
			},
			getTeachSchedule() {
				this.editCourseScheduleModal.show = true;
				this.editCourseScheduleModal.showType = 'detail';
				this.editCourseScheduleModal.title = '排课信息 ' + this.currentEvent.dateStr;
				this.curDate = this.currentEvent.dateStr;
			},
			modifyClassNumber() {
				this.editCourseScheduleModal.showType = 'modify';
				this.formValidate = {
					classId: this.currentEvent.classId,
					classCourseId: this.currentEvent.courseId,
					classCourseName: this.currentEvent.courseName,
					classNumberList: this.currentEvent.classNumberList.map(item => {
						return {
							classNumberId: item.classNumberId,
							expDto: item.expDto.map(exp => exp.expid),
							time: [item.startTime.split(" ")[1], item.endTime.split(" ")[1]]
						}
					}),
					courseDictCode: this.currentEvent.courseDictCode,
					teacherId: this.USER_ID,
					teacherName: this.USER_Name,
					userIdlist: this.currentEvent.stuList.map(user => user.userId)
				};
				this.$set(this.formValidate, 'courseNum', this.currentEvent.classNumberList.length);
			},
			handleEventMouseEnter: function(info) {
//				console.log('Event: ' + info.event.title);
//				console.log('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
//				console.log('View: ' + info.view.type);
				this.currentEvent = info.event.extendedProps.item;
				this.showTooltip = true;
				this.tooltip = new Popper(info.el, document.getElementById("popover"), {
					placement: 'top'
				});
				//限制课程的可选时间
				//this.getDisabledTime();
			},
			handleEventClick: function(info) {
//				console.log('Event: ' + info)
				this.currentEvent = info.event.extendedProps.item;
				if(new Date(info.event.extendedProps.item.dateStr) < new Date(new Date().toLocaleDateString())) {
					this.editCourseScheduleModal.showModifyBtn = false;
				} else {
					this.editCourseScheduleModal.showModifyBtn = true;
				}
				this.currentEvent.classNumberList.forEach(item => {
					this.$set(item, 'showEnviron', false)
				})
				//this.getCourseExpList(this.currentEvent.courseId);
				this.getExperGroupsUsers(info.event.extendedProps.item.classId).then((classInfo) => {
					this.$set(this.currentEvent, 'stuCount', classInfo.stuCount);
					this.$set(this.currentEvent, 'className', classInfo.className);
					this.$set(this.currentEvent, 'stuList', classInfo.stuList);
				});
				this.getTeachSchedule();
			},
			cancelEnvironModal() {
//				console.log(this.eventEl);
				this.tooltip = new Popper(this.eventEl, document.getElementById("popover"), {
					placement: 'right-start',
					eventsEnabled: true
				});
			},
			handlEventLimitClick: function(info) {
				return 'popover'
			},
			handleEventMouseLeave: function(info) {
//				console.log('Event: ' + info.event.title);
//				console.log('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
//				console.log('View: ' + info.view.type);
				this.tooltip.destroy();
				this.showTooltip = false;
			},
			handleNavLinkDayClick: function(date, jsEvent) {
				this.curDate = date;
			},
			formatText(info) {
				return(info.date.hour < 10 ? ('0' + info.date.hour) : info.date.hour) + ":" + (info.date.minute < 10 ? ('0' + info.date.minute) : info.date.minute)
			},
			handleViewRender() {},
			saveCourseSchedule(type) {
				this.$refs['formValidate'].validate((valid) => {
					if(valid) {
						if(this.formValidate.classNumberList.some(classNumber => !classNumber.time[0])) {
							this.$Message.warning('时间不能为空');
							this.addCourseScheduleModal.loading = false;
							setTimeout(() => {
								this.addCourseScheduleModal.loading = true;
							})
							return
						}
						let data = JSON.parse(JSON.stringify(this.formValidate));
						data.classNumberList = this.formValidate.classNumberList.map((course, index) => {
							let data = {
								"classNumberOrder": (index + 1).toString(),
								"endTime": this.curDate + ' ' + course.time[1] + ':00',
								"expDto": course.expDto.map(expid => {
									console.log(this.expList)
									let expInfo = this.expList.filter(item => item.ecid == expid)[0]
									return {
										"expCode": expInfo.typeCode,
										"expName": expInfo.ecname,
										"expid": expid
									}
								}),
								"startTime": this.curDate + ' ' + course.time[0] + ':00'
							}
							if(course.classNumberId) {
								data.classNumberId = course.classNumberId;
							}
							return data;
						})
						delete data.courseNum;
						if(type == 'add') {
							addTeachSchedule(data).then(data => {
								if(data.code == 1) {
									this.queryTeachSchedule();
									this.addCourseScheduleModal.loading = false;
									this.addCourseScheduleModal.show = false;
								} else {
									this.addCourseScheduleModal.loading = false;
									this.$Message.warning(data.message);
								}
							})
						} else {
							updateTeachSchedule(data).then(data => {
								if(data.code == 1) {
									this.queryTeachSchedule();
									this.editCourseScheduleModal.show = false;
									setTimeout(() => {
										this.addCourseScheduleModal.loading = true;
									})
								} else {
									this.addCourseScheduleModal.loading = false;
									setTimeout(() => {
										this.addCourseScheduleModal.loading = true;
									})
									this.$Message.warning(data.message);
								}
							})
						}
					} else {
						this.addCourseScheduleModal.loading = false;
						setTimeout(() => {
							this.addCourseScheduleModal.loading = true;
						})
					}
				})
			},
			showToolTip(info) {

			},
			closeTooltip() {
				this.tooltip.destroy();
				this.showTooltip = false;
			},
			getEnvironData(event) {
				this.$set(event, 'showEnviron', true);
				this.environInfo = {
					'stuList': this.currentEvent.stuList,
					'expList': event.expDto,
					'courseId': this.currentEvent.courseId,
					'classId': this.currentEvent.classId
				}
			},
			//获取课程资源
			getAllCourse() {
				return new Promise((resolve,reject) => {
					let params = {
						"existPractice": true, //是否包含实操课件
						"enable": 1,
						isPublic: 1
					}
					getallcourselist(params).then(data => {
						if(data.code == 1) {
							this.courseList = data.data.items.filter(course => course.expriments && course.expriments.length > 0);
						}
						resolve();
					}).catch(err => {
						resolve();
						_this.$Message.error('获取课程列表失败，请稍后再式')
					})
				})
			},
			//获取课程课件列表
			getCourseExpList(id) {
				if(!id) {
					return;
				}
				this.getCurCourseInfo(id);
				this.formValidate.courseNum = 0;
				this.initCourseNumData(0);
				courseExpDetail(id).then(data => {
					if(data.code == 1 && data.data) {
						this.expList = data.data.filter(exp => exp.expType == 0);
					} else {
						//this.$Message.error(data.message)
					}
				}).catch(err => {
					this.$Message.error('获取课件列表失败，请稍后再式')
				})
			},
			queryClassList() {
				let params = {
					pageIndex: 1,
					pageSize: 2147483647,
					teacherId: this.USER_ID
				}
				queryClassList(params).then(data => {
					if(data.code == 1) {
						this.classList = data.attribute.dataList;
						this.classInfo = this.classList.filter(classInfo => classInfo.id == this.$route.query.id)[0];
						this.queryTeachSchedule();
					} else {
						this.classList = [];
						this.$Message.warning(data.message);
					}
				})
			},
			delCourseByClassNumber(classNumberId, index) {
				let params = {
					classNumberId: classNumberId
				}
				delTeachSchedule(params).then(data => {
					if(data.code == 1) {
						this.$Message.info('操作成功');
						this.currentEvent.classNumberList.splice(index, 1)
						if(this.currentEvent.classNumberList.length == 0) {
							this.editCourseScheduleModal.show = false;
						}
						this.queryTeachSchedule();
					} else {
						this.$Message.warning(data.message);
					}
				})
			},
			getExperGroupsUsers(classId) {
				if(!classId) {
					return
				}
				let classInfo = this.classList.filter(item => item.id == classId)[0];
				return new Promise((resolve, reject) => {
					getExperGroupsUsers(classInfo.egId).then(data => {
						if(data.code == 1) {
							this.formValidate.userIdlist = data.data.map(user => user.userId);
							classInfo.stuCount = data.data.length;
							classInfo.stuList = data.data;
							resolve(classInfo);
						} else {
							this.$Message.warning(data.message)
						}
					})
				})
			},
			getCurCourseInfo(courseId) {
				if(!courseId || this.courseList.length == 0) {
					return
				}
				let course = this.courseList.filter(item => item.ccid == courseId)[0];
				if(!course) {
					this.$Message.warning("该课程已被修改或删除");
					return;
				}
				this.formValidate.classCourseName = course.ccname;
				this.formValidate.courseDictCode = course.typeCode;
			},
			resetField() {
				if(this.$refs['formValidate']) {
					this.$refs['formValidate'].resetFields();
					this.formValidate = {
						classId: '',
						classCourseId: '',
						classCourseName: '',
						classNumberList: [],
						courseDictCode: '',
						teacherId: this.USER_ID,
						teacherName: this.USER_Name,
						courseNum: 0
					}
				}
			},
			initData() {
				this.currentEvent = {};
				if(this.$refs['formValidate']) {
					this.$refs['formValidate'].resetFields();
				}
				this.formValidate = {
					classId: '',
					classCourseId: '',
					classCourseName: '',
					classNumberList: [],
					courseDictCode: '',
					teacherId: this.USER_ID,
					teacherName: this.USER_Name,
					courseNum: 0
				}
			},
			initCourseNumData(num) {
				this.formValidate.classNumberList = [];
				for(let i = 0; i < num; i++) {
					this.formValidate.classNumberList.push({
						time: '',
						expDto: []
					})
				}
			},
			formatHeaderText(date) {
				if(date.getDay() == 0) {
					return '日'
				} else {
					return date.getDay()
				}
			},
			formatDayText(info) {
				$(info.el).append('<div class="dayClickButton"></div>');
				return info.date.getDate();
			},
			toDetailPage(item) {
				this.$router.push({
					name: 'courseScheduleDetail',
					params: {
						row: item,
						classInfo: this.classInfo
					}
				})
			},
			changeTime(time, item) {
				if(time.length > 0 && time[1] && time[0]) {
					if(new Date(this.curDate + ' ' + time[1]).getTime() < new Date().getTime() || new Date(this.curDate + ' ' + time[0]).getTime() < new Date().getTime()) {
						item.time = [new Date().getHours() + ':' + (new Date().getMinutes() + 10), new Date().getHours() + ':' + (new Date().getMinutes() + 20)]
					}
				}
			},
		}
	}
</script>

<style scoped>
.pageWrap {
	margin: 30px;
	/*background: #fff;*/
	height: calc(100vh - 60px);
	border-radius: 10px;
}
</style>

<style>
	@import '@fullcalendar/core/main.css';
	@import '@fullcalendar/daygrid/main.css';
	
	.fc-day-header.fc-widget-header {
		padding: 10px;
	}
	
	#calender {
		margin-top: 10px;
		background: #fff;
		margin: 20px 0;
		padding: 20px 30px;
		border-radius: 10px;
	}
	
	#calender .fc-day-number {
		padding: 10px;
		cursor: pointer;
	}
	
	#calender .fc-row.fc-widget-header {
		background: #eee;
		border-radius: 20px;
		margin-bottom: 20px;
	}
	
	#calender .fc th {
		text-align: right;
		border: none;
	}
	
	#calender.fc-day-header.fc-widget-header,
	.fc-head-container.fc-widget-header {
		border: none;
	}
	
	#calender .fc-event,
	.fc-event-dot {
		background-color: #c0edf1;
		border-color: #58d0da;
		color: #000;
		/*padding: 5px;*/
	}
	
	#calender .fc-content {
		padding: 5px;
		text-overflow: ellipsis;
	}
	
	#calender .fc-day-top.fc-other-month,
	.fc-day-top.fc-past {
		opacity: 0.3
	}
	
	#calender .courseNum {
		position: absolute;
		top: 50%;
		width: 40px;
		height: 40px;
		line-height: 40px;
		float: left;
		border-radius: 50%;
		text-align: center;
		color: #fff;
		font-size: 20px;
		transform: translateY(-50%);
	}
	
	#calender .courseExpList {
		/*padding-left:50px;*/
	}
	
	#calender .courseExpList .ivu-divider {
		margin: 5px 0;
	}
	
	#calender .fc-title {
		/*display: block;*/
	}
	
	#calender .ivu-card-head,
	#calender .ivu-card-body {
		padding: 7px 8px;
	}
	
	#calender .ivu-card-extra {
		right: 8px;
		top: 7px;
	}
	
	#calender .ivu-card-head p,
	#calender .ivu-card-head-inner {
		font-size: 13px;
	}
	
	#calender .expInfo .ivu-icon,
	.scheduleInfo .ivu-icon {
		margin-right: 4px;
		margin-top: -2px;
	}
	
	#calender .scheduleInfo span {
		margin-right: 10px;
	}
	
	#calender .ivu-poptip-popper {
		z-index: 1000;
	}
	
	#calender .fc-license-message {
		display: none;
	}
	
	#calender .time {
		font-size: 12px;
		font-weight: normal;
		color: darkslategrey;
		padding: 2px;
	}
	
	#calender .time .ivu-icon {
		position: relative;
		top: -1px;
	}
	
	#calender .course-environ .ivu-tag {
		padding: 0 4px;
	}
	
	#calender .ivu-table td.fc-event-container {
		height: auto;
	}
	
	#calender .fc-center h2 {
		display: inline-block;
		vertical-align: middle;
		margin: 0 10px;
		font-size: 20px;
	}
	
	#calender .fc-center .fc-icon {
		color: #000;
	}
	
	#calender .fc-center .fc-button {
		background: none!important;
		border: none!important;
		box-shadow: none!important;
	}
	
	#calender .fc-button-primary {
		background: none!important;
		color: #ccc!important;
		border-color: #dcdee2!important;
	}
	
	#calender .fc.fc-ltr.fc-unthemed {
		border: 1px solid #ddd;
		padding: 20px;
		border-radius: 10px;
	}
	
	.fc-unthemed td.fc-today {
		/*background:#e6fffb;*/
		background: none;
	}
	
	#calender .fc-unthemed td.fc-today .fc-day-number {
		/*color:#eb2f96;*/
		/*background:red;*/
		color: #ffadd2;
		/*border-radius: 50%;*/
		/*background:#F5F5F5;*/
	}
</style>